<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS简介</title>
  </head>
  <!--
    第二种方式(内部样式表)
      - 将样式编写到head中的style标签中
        然后通过CSS选择器来选中元素并为其设置各种样式
        可以同时为多个标签设置样式,并且修改时只需要修改一处即可全部应用。

      - 内部样式表更加方便对样式进行复用
      - 问题:
          我们的内部样式表只能对一个网页起作用,
            它里边的样式不能跨页面进行复用。
  -->
  <style>
      p {
          color: yellow;
          font-size: 60px;
      }
  </style>


  <!--
    第三种方式(外部样式表(开发中主要推荐!!!)) 最佳实践
      - 可以将CSS样式编写到一个外部的CSS文件中
          然后通过link标签来引入外部的CSS文件
      - 外部样式表需要通过link标签进行引入,
        意味着只要想使用这些样式的网页对其进行引用,
        使页面可以在不同页面之间进行复用。
      - 将样式编写到外部的CSS文件中,可以最大限度的使用到浏览器的缓存机制,
        (浏览器会有缓存机制,缓存图片等到内存中)
        从而加快网页的加载速度,提高用户的体验。
  -->
  <link rel="stylesheet" href="style.css">

  <body>
    <!--
      网页分成三个部分:
        结构(HTML)
        表现(CSS)
        行为(JavaScript)

      CSS
        - 层叠样式表
        - 网页实际上是一个多层结构,通过CSS可以分别为网页的每一个层来设置样式
          而最终我们能看到的只是网页的最上边一层
        - 总之一句话,CSS用来设置网页元素中的样式
    -->
    <!--
      使用CSS来修改我们元素的样式,
        第一种方式(内联样式,行内样式):
          - 在标签内部通过style属性来设备元素的样式。
          - 问题:
              使用内联样式,样式只对一个标签生效,如果希望影响到多个元素必须在每一个元素中复制一遍。
              并且当样式发生变化的时候,我们必须要一个一个的修改,非常的不方便。

    -->
    <h1>测试第三种外联样式</h1>

    <p style="color: red; font-size: 60px">少小离家老大回,乡音无改鬓毛衰</p>

    <p style="color: red; font-size: 60px">今天天气真不错!</p>


    <p>落霞与孤鹜齐飞,秋水共长天一色</p>


  </body>
</html>
